<template>
  <div>
    <el-dialog
      title="数据过滤"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      append-to-body
    >
      <template #default>
        <el-row>
          <el-col :span="6">
            <el-table
              ref="leftTable"
              :data="remainCol"
              row-key="columnName"
              style="wide: 100%"
              height="250"
              :row-style="{ height: '10px' }"
              :cell-style="{ padding: '5px 0' }"
              @selection-change="handleLeftSelection"
            >
              <el-table-column type="selection" :reserve-selection="true" />
              <el-table-column label="列名" width="80" prop="columnName" />
              <el-table-column
                label="类型"
                width="80"
                prop="type"
                :filters="filters"
                :filter-method="filterHandler"
              />
            </el-table>
          </el-col>
          <!-- 中间的按钮 -->
          <el-col
            :span="3"
            style="justify-content: center; align-items: center"
          >
            <div
              style="
                height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
              "
            >
              <div>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-d-arrow-right"
                  circle
                  @click="addCol"
                />
              </div>
              <div>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-d-arrow-left"
                  circle
                  @click="deleteCol"
                />
              </div>
            </div>
          </el-col>

          <!-- 右侧配置项 -->
          <el-col :span="15">
            <el-table
              :data="formModel.config.colFilter"
              style="width: 100%"
              height="250"
              :row-style="{ height: '10px' }"
              :cell-style="{ padding: '5px 0' }"
              @selection-change="handleRightSelection"
            >
              <el-table-column type="selection" />
              <el-table-column label="列名" width="60" prop="columnName" />
              <el-table-column label="类型" width="80" prop="type" />
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleButtonClick(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="运算符" width="100">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.operator"
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in operatorOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="比较值" width="100">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.value"
                    size="mini"
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'

export default {
  name: 'DataFilter',
  inject: ['root','flowchartId'],
  props: {
    dialogVisible: Boolean
  },
  data() {
    return {
      formModel: {},
      inputData: [],
      operatorOptions: [
        {
          value: '1',
          label: '>'
        },
        {
          value: '2',
          label: '<'
        },
        {
          value: '3',
          label: '='
        },
        {
          value: '4',
          label: '≥'
        },
        {
          value: '5',
          label: '≤'
        }
      ],
      leftSelection: [],
      rightSelection: [],
      filters: []
    }
  },
  computed: {
    remainCol: function () {
      return this.inputData.filter(
        (item) =>
          !this.formModel.config.colFilter.some(
            (config) => config.columnName === item.columnName
          )
      )
    }
  },
  created() {
    console.log('selector created')
    const { getSelected, save, find } = this.root.propsAPI
    const formModel = getSelected()[0].getModel()
    // 读取上一个节点信息，获取当前节点的入射边
    const graphData = save()
    const incEdges = graphData.edges.filter((edge) => {
      return edge.target === formModel.id
    })
    // 拷贝当前节点的信息
    this.formModel = Object.assign(
      {},
      { shape: 'flow-smooth' },
      cloneDeep(formModel)
    )
    if (incEdges.length === 1) {
      const incEdge = incEdges[0]
      const inputNodeModel = find(incEdge.source).getModel()
      // 须是已经执行过、输出格式为csv的节点
      if (inputNodeModel.executed) {
        // 拷贝上一个节点的输出数据
        this.inputData = inputNodeModel.config.output
        // 构建筛选条件
        this.inputData.forEach((inputItem) => {
          if (
            !this.filters.some(
              (filterItem) => filterItem.value === inputItem.type
            )
          ) {
            this.filters.push({
              text: inputItem.type,
              value: inputItem.type
            })
          }
        })
      }
    }
  },
  methods: {
    handleButtonClick(index, row) {
      console.log(index, row)
      this.formModel.config.colFilter.splice(index, 1)
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleClose() {
      console.log('data filter emit close')
      this.$emit('close-dialog')
    },
    handleConfirm() {
      console.log('enter confirm')
      const { getSelected, executeCommand, update } = this.root.propsAPI
      const { formModel } = this
      setTimeout(() => {
        const item = getSelected()[0]
        if (!item) {
          return
        }
        formModel.executed = false
        executeCommand(() => {
          update(item, formModel)
        })
        this.$emit('close-dialog')
      }, 0)
    },
    handleLeftSelection(val) {
      this.leftSelection = val
    },
    handleRightSelection(val) {
      this.rightSelection = val
    },
    addCol() {
      console.log('add col')
      this.leftSelection.forEach((selection) =>
        this.formModel.config.colFilter.push({
          name: selection.columnName,
          type: selection.type,
          operator: '',
          value: ''
        })
      )
      this.$refs.leftTable.clearSelection()
      console.log('exit add col')
    },
    deleteCol() {
      this.formModel.config.colFilter = this.formModel.config.colFilter.filter(
        (config) =>
          !this.rightSelection.some(
            (selection) => selection.columnName === config.columnName
          )
      )
    }
  }
}
</script>

<style>
</style>
